<template>
  <div class="attraction-admin">
    <h1>景点信息管理</h1>

    <!-- Add Attraction Form -->
    <div class="form-container">
      <h2>{{ isEditing ? '修改景点信息' : '添加新景点' }}</h2>
      <form @submit.prevent="submitAttraction">
        <div class="form-group">
          <label for="name">景点名称:</label>
          <input type="text" id="name" v-model="attractionForm.name" required>
        </div>
        <div class="form-group">
          <label for="major_category">大归类:</label>
          <input type="text" id="major_category" v-model="attractionForm.major_category">
        </div>
        <div class="form-group">
          <label for="minor_category">小归类:</label>
          <input type="text" id="minor_category" v-model="attractionForm.minor_category">
        </div>
        <div class="form-group">
          <label for="details">信息具体内容:</label>
          <textarea id="details" v-model="attractionForm.details"></textarea>
        </div>
        <button type="submit">{{ isEditing ? '保存修改' : '添加景点' }}</button>
        <button v-if="isEditing" @click="cancelEdit" type="button">取消编辑</button>
      </form>
    </div>

    <!-- Attractions List -->
    <div class="attractions-list">
      <h2>景点列表</h2>
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>名称</th>
            <th>大归类</th>
            <th>小归类</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="attraction in attractions" :key="attraction.id">
            <td>{{ attraction.id }}</td>
            <td>{{ attraction.name }}</td>
            <td>{{ attraction.major_category }}</td>
            <td>{{ attraction.minor_category }}</td>
            <td>
              <button @click="editAttraction(attraction)">编辑</button>
              <button @click="deleteAttraction(attraction.id)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      attractions: [],
      attractionForm: {
        name: '',
        major_category: '',
        minor_category: '',
        details: ''
      },
      isEditing: false,
      editingId: null
    }
  },
  methods: {
    fetchAttractions() {
      fetch('/wl_AttractionAdmin/show/')
        .then(response => response.json())
        .then(data => {
          this.attractions = data
        })
        .catch(error => console.error('Error:', error))
    },
    submitAttraction() {
      const url = this.isEditing
        ? `/wl_AttractionAdmin/modify/${this.editingId}/`
        : '/wl_AttractionAdmin/add/'

      fetch(url, {
        method: this.isEditing ? 'PUT' : 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRFToken': this.getCookie('csrftoken')
        },
        body: JSON.stringify(this.attractionForm)
      })
        .then(response => response.json())
        .then(data => {
          this.fetchAttractions()
          this.resetForm()
        })
        .catch(error => console.error('Error:', error))
    },
    editAttraction(attraction) {
      this.isEditing = true
      this.editingId = attraction.id
      this.attractionForm = { ...attraction }
    },
    cancelEdit() {
      this.isEditing = false
      this.editingId = null
      this.resetForm()
    },
    deleteAttraction(id) {
      if (confirm('确定要删除这个景点吗？')) {
        fetch(`/wl_AttractionAdmin/delete/${id}/`, {
          method: 'DELETE',
          headers: {
            'X-CSRFToken': this.getCookie('csrftoken')
          }
        })
          .then(response => {
            if (response.ok) {
              this.fetchAttractions()
            }
          })
          .catch(error => console.error('Error:', error))
      }
    },
    resetForm() {
      this.attractionForm = {
        name: '',
        major_category: '',
        minor_category: '',
        details: ''
      }
      this.isEditing = false
      this.editingId = null
    },
    getCookie(name) {
      let cookieValue = null
      if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';')
        for (let i = 0; i < cookies.length; i++) {
          const cookie = cookies[i].trim()
          if (cookie.substring(0, name.length + 1) === (name + '=')) {
            cookieValue = decodeURIComponent(cookie.substring(name.length + 1))
            break
          }
        }
      }
      return cookieValue
    }
  },
  mounted() {
    this.fetchAttractions()
  }
}
</script>

<style scoped>
.attraction-admin {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

h1, h2 {
  color: #333;
}

.form-container {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input[type="text"], textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 10px;
}

button:hover {
  background-color: #45a049;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #4CAF50;
  color: white;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}
</style>
